<template>
	<div>
		<n-tabs
			v-model:value="tab"
			type="bar"
			class="items-center px-[35px] pt-10"
			v-if="!showResetEmail && !showResetMobile">
			<n-tab-pane :name="BindingTabType.email" :tab="$t('account.email')">
				<binding-email />
			</n-tab-pane>
			<n-tab-pane :name="BindingTabType.mobile" :tab="$t('account.mobile')">
				<binding-mobile />
			</n-tab-pane>
		</n-tabs>

		<base-popup
			:modelValue="showResetEmail"
			:isGoBack="true"
			:closable="false"
			title-t="profile.modifyEmail"
			@go-back="onClose(BindingTabType.email)">
			<reset-email class="px-[35px] pt-10" @close="onClose(BindingTabType.email)" />
		</base-popup>

		<base-popup
			:modelValue="showResetMobile"
			:isGoBack="true"
			:closable="false"
			title-t="profile.modifyMobile"
			@go-back="onClose(BindingTabType.mobile)">
			<reset-mobile class="px-[35px] pt-10" @close="onClose(BindingTabType.mobile)" />
		</base-popup>
	</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { NTabs, NTabPane } from 'naive-ui'
import BindingEmail from '@/components/profile/binding/binding-email.vue'
import BindingMobile from '@/components/profile/binding/binding-mobile.vue'
import ResetEmail from '@/components/profile/reset-email/index.vue'
import ResetMobile from '@/components/profile/reset-mobile/index.vue'
import { useProfileStore } from '@/store'
import { BindingTabType } from '@/types'
import { BasePopup } from '@/components/base'

const profileStore = useProfileStore()

const tab = ref(profileStore.bindingTabShow)

const showResetEmail = computed(
	() => tab.value === BindingTabType.email && !!profileStore.userInfo?.email
)

const showResetMobile = computed(
	() => tab.value === BindingTabType.mobile && !!profileStore.userInfo?.mobile
)

const onClose = (type: string) => {
	const TAB: any = {
		[BindingTabType.email]: BindingTabType.mobile,
		[BindingTabType.mobile]: BindingTabType.email
	}
	tab.value = TAB[type]
}
</script>
